<template>
  <div class="tongtu">
    <div  id="main11" style="width: 50%; height: 600px"></div>
    <div  id="main12" style="width: 50%; height: 600px"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      mockindex: 0,
      mockdata: [
        [200, 100, 25, 80, 25],
        [210, 80, 25, 25, 218],
        [110, 170, 25, 218, 25],
        [187, 105, 25, 218, 135],
        [90, 60, 25, 105, 25],
      ],
    };
  },
  beforeDestory() {
    clearInterval(this.iniLine);
    clearInterval(this.tiaotu);
    clearInterval(this.bing);
  },
  mounted() {
    let _this = this;
    setInterval(() => {
      _this.iniLine(_this.mockdata[_this.mockindex]);
    }, 1000);
    setInterval(() => {
      _this.tiaotu(_this.mockdata[_this.mockindex]);
    }, 1000);
  },
  methods: {
    tiaotu(data) {
      this.mockindex =
        this.mockindex < this.mockdata.length ? this.mockindex + 1 : 0;
      var chartDom = document.getElementById("main12");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["网页设计", "前端框架","C语言","网络基础","B/S架构"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data,
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },
    random(max, min) {
      return Math.floor(Math.random() * (max - min)) + min;
    },
    iniLine() {
      let data = [];
      for (let i = 1; i <= 7; i++) {
        let a = this.random(70, 200);
        data.push(a);
      }
      this.mockindex =
        this.mockindex < this.mockdata.length ? this.mockindex + 1 : 0;
      var chartDom = document.getElementById("main11");
      var myChart = echarts.init(chartDom);
      var option;
      option = {
        xAxis: {
          type: "category",
          data: ["网页设计", "前端框架","C语言","网络基础","B/S架构"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: data,
            type: "line",
          },
        ],
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style>
.tongtu{
    display: flex;
  justify-content: space-around;
}
/* #main11 {
  
}
#main12 {
  
}
#main13{

} */
</style>